<template>
  <div>
    <el-row class="tac">
      <el-col>
        <h1 @click="index">LaLa</h1>

        <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"> -->
        <!-- 		<el-radio-button :label="false">></el-radio-button>
					<el-radio-button :label="true"><</el-radio-button> -->

        <!-- </el-radio-group> -->
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
          default-active=""
          text-color="#eee"
          background-color="rgb(48,65,86)"
          @select="navigator"
        >
          <!-- index 当前激活的菜单 default-active="member" 配合 默认选中-->
          <!-- index 唯一的标志 -->
          <!-- <el-menu-item index='/member' @click='click("管理员管理")'> -->
          <!-- <i class="el-icon-menu"></i> -->
          <!-- <el-button @click="isCollapse=!isCollapse">取 消</el-button> -->
          <!-- <el-button size="mini" round @click="isCollapse=!isCollapse">超小按钮</el-button> -->
          <!-- <i class="iconfont icon-guanliyuanguanli" @click="isCollapse=!isCollapse"></i> -->
          <!-- <span slot="title">管理员管理</span> -->
          <!-- </el-menu-item> -->
          <!-- <el-menu-item index="/data" @click='click("数据管理")'>
						<i class="el-icon-menu"></i>
						<i class="iconfont icon-shujutongji"></i>
						<span slot="title">数据管理</span>
					</el-menu-item> -->
          <el-menu-item index="/member" @click="click('管理员管理')">
            <!-- <i class="el-icon-menu"></i> -->
            <i class="iconfont icon-guanliyuanguanli"></i>
            <span slot="title">管理员管理</span>
          </el-menu-item>
          <el-menu-item index="/classify" @click="click('分类管理')">
            <!-- <i class="el-icon-menu"></i> -->
            <i class="iconfont icon-fenleiguanli"></i>
            <span slot="title">分类管理</span>
          </el-menu-item>
          <el-menu-item index="/product" @click="click('产品管理')">
            <!-- <i class="el-icon-menu"></i> -->
            <i class="iconfont icon-liduolachanpinguanli"></i>
            <span slot="title">产品管理</span>
          </el-menu-item>
          <el-menu-item index="/order" @click="click('订单管理')">
            <!-- <i class="el-icon-menu"></i> -->
            <i class="iconfont icon-dingdan"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "navMenu",
  data() {
    return {
      // isCollapse: true,
      // message: '我是来自子组件的消息'
    };
  },
  props: ["isCollapse"],
  created() {},
  mounted() {},
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
      console.log(123);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // index: 选中菜单项的 index, indexPath: 选中菜单项的 index path
    navigator(index, indexPath) {
      // console.log(index, indexPath)
      // 路由跳转
      // this.$route.push('/'+indexPath[0])
      this.$router.push(indexPath[0]);
    },
    click(son) {
      this.$emit("childFn", son);
    },
    index() {
      // console.log(123);
      this.$router.push({
        path: "/",
      });
    },
  },
};
</script>

<style scoped="scoped">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/* 导航 */

.el-row h1 {
  padding: 20px 0;
  text-align: center;
  color: white;
  /* background-color: #367fa9; */
  background-color: rgb(48, 65, 86);
  cursor: pointer;
}

.el-aside {
  background-color: rgb(48, 65, 86);
  /* color: red; */
}
.el-menu {
  border-right: 0;
}
.el-icon-menu {
  color: white;
}

/* 	.el-menu-item {
		color: white;
		background-color: rgba(15, 41, 80, 1);
	} */

.iconfont {
  color: white;
  margin-right: 10px;
  font-size: 20px;
}
</style>
